<template>
  <div class="gunDetails">
    <div
      class="detailItem"
      v-for="(item, index) in gunDetailsList"
      :key="index"
    >
      <div class="itemLeft">
        <div class="circleDot" :style="{ borderColor: item.color }"></div>
        <div class="itemName" :style="{ color: item.color }">
          {{ item.name }}
        </div>
      </div>
      <div class="itemPercent" :style="{ color: item.color }">
        {{ item.percent }}
      </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  gunRealTimeNum: {
    type: Object,
    default: () => ({}),
  },
});
watch(
  () => props.gunRealTimeNum,
  async (newVal) => {
    if (newVal && newVal.gunRealTimeStatistics) {
      const stats = newVal.gunRealTimeStatistics;
      const totalGunNum = stats.totalGunNum || 0;
      const valueKeys = [
        "totalGunNum", // 充电枪总数
        "chargingGunNum", // 充电中
        "offlineGunNum", // 待机中
        "onlineGunNum", // 在线中
        "badGunNum", // 故障中
      ];
      gunDetailsList.value.forEach((config, index) => {
        const currentValue = stats[valueKeys[index]] || 0;
        if (totalGunNum > 0) {
          config.percent =
            ((currentValue / totalGunNum) * 100).toFixed(2) + "%";
        } else {
          config.percent = "0%";
        }
      });
    }
  }
);
// 充电枪详情数据
const gunDetailsList = ref([
  { name: "充电枪总数", color: "#1df9fc", percent: "0%" },
  { name: "充电中", color: "#1d68f2", percent: "0%" },
  { name: "待机中", color: "#6e69f8", percent: "0%" },
  { name: "在线中", color: "#02b7ee", percent: "0%" },
  { name: "故障中", color: "#fdd62f", percent: "0%" },
]);
</script>

<style lang="less" scoped>
.gunDetails {
  width: 100%;
  border-radius: 4px;
  padding: 10px 0;
}

.detailItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  position: relative;

  &:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
  }
}

.itemLeft {
  display: flex;
  align-items: center;
}
.circleDot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 12px;
  border-width: 4px;
  border-style: solid;
  background-color: transparent;
}
.itemName {
  font-size: 18px;
  font-weight: 500;
}

.itemPercent {
  font-size: 24px;
  font-weight: bold;
}
</style>